---
layout: default
---

<!-- Post Header -->
<style type="text/css">
    header.intro-header{
        background-image: url('{{ site.baseurl }}/{% if page.header-img %}{{ page.header-img }}{% else %}{{ site.header-img }}{% endif %}')
    }
</style>
<header class="intro-header" >
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                <div class="post-heading">
                    <div class="Tags">
                        {% for tag in page.tags %}
                        <a class="tag" href="/Tags/#{{ tag }}" title="{{ tag }}">{{ tag }}</a>
                        {% endfor %}
                    </div>
                    <h1>{{ page.title }}</h1>
                    {% if page.subtitle %}
                    <h2 class="subheading">{{ page.subtitle }}</h2>
                    {% endif %}
                    <span class="meta">Posted by {% if page.author %}{{ page.author }}{% else %}{{ site.title }}{% endif %} on {{ page.date | date: "%B %-d, %Y" }}</span>
                </div>
            </div>
        </div>
    </div>
</header>




<!-- Post Content -->
<article>
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1 post-container">

                {{ content }}

                <hr>

                <ul class="pager">
                    {% if page.previous.url %}
                    <li class="previous">
                        <a href="{{ page.previous.url | prepend: site.baseurl | replace: '//', '/' }}" data-toggle="tooltip" data-placement="top" title="{{page.previous.title}}">&larr; Previous Post</a>
                    </li>
                    {% endif %}
                    {% if page.next.url %}
                    <li class="next">
                        <a href="{{ page.next.url | prepend: site.baseurl | replace: '//', '/' }}" data-toggle="tooltip" data-placement="top" title="{{page.next.title}}">Next Post &rarr;</a>
                    </li>
                    {% endif %}
                </ul>

                <!-- Duoshuo Share start -->
                <style>
                    .ds-share{
                        text-align: right;
                    }
                    
                    @media only screen and (max-width: 700px) {
                        .ds-share {

                        }
                    }
                </style>

                <div class="ds-share"
                    data-thread-key="{{page.id}}" data-title="{{page.title}}"
                    data-images="{{ site.url }}/{% if page.header-img %}{{ page.header-img }}{% else %}{{ site.header-img }}{% endif %}"
                    data-content="{{ content | strip_html | truncate:80 }} | Microdust:Azeril's blog"
                    data-url="{{site.url}}{{page.url}}">
                    <div class="ds-share-inline">
                      <ul  class="ds-share-icons-16">

                        <li data-toggle="ds-share-icons-more"><a class="ds-more" href="#">分享到：</a></li>
                        <li><a class="ds-wechat flat" href="javascript:void(0);" data-service="wechat">微信</a></li>
                        <li><a class="ds-weibo flat" href="javascript:void(0);" data-service="weibo">微博</a></li>
                        <li><a class="ds-douban flat" href="javascript:void(0);" data-service="douban">豆瓣</a></li>
                      </ul>
                      <div class="ds-share-icons-more">
                      </div>
                    </div>
                <hr>
                </div>
                <!-- Duoshuo Share end-->


                <!-- 多说评论框 start -->
                <div class="comment">
                    <div class="ds-thread" data-thread-key="{{page.id}}" data-title="{{page.title}}" data-url="{{site.url}}{{page.url}}"></div>
                </div>
                <!-- 多说评论框 end -->
            </div>
        </div>
    </div>
</article>



<!-- 多说公共JS代码 start (一个网页只需插入一次) -->
<script type="text/javascript">
var duoshuoQuery = {short_name:"cnfeat"};
    (function() {
        var ds = document.createElement('script');
        ds.type = 'text/javascript';ds.async = true;
        ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
        ds.charset = 'UTF-8';
        (document.getElementsByTagName('head')[0]
         || document.getElementsByTagName('body')[0]).appendChild(ds);
    })();
</script>
<!-- 多说公共JS代码 end -->

<!-- async load function -->
<script>
    function async(u, c) {
      var d = document, t = 'script',
          o = d.createElement(t),
          s = d.getElementsByTagName(t)[0];
      o.src = u;
      if (c) { o.addEventListener('load', function (e) { c(null, e); }, false); }
      s.parentNode.insertBefore(o, s);
    }
</script>

<!-- anchor-js, Doc:http://bryanbraun.github.io/anchorjs/ -->
<script>
    async("http://cdn.bootcss.com/anchor-js/1.1.1/anchor.min.js",function(){
        anchors.options = {
          visible: 'always',
          placement: 'right',
          icon: ''
        };
        anchors.add().remove('.intro-header h1').remove('.subheading');
    })
</script>
<style>
    /* place left on bigger screen */
    @media all and (min-width: 800px) {
        .anchorjs-link{
            position: absolute;
            left: -0.75em;
            font-size: 1.1em;
            margin-top : -0.1em;
        }
    }
</style>
